<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useSettingsStore } from './stores/settingsStore';
import { useCategoryStore } from './stores/categoryStore';
import mainAppStructure from './components/mainAppStructure.vue';
import CategoryList from './components/todo/CategoryList.vue';

const router = useRouter();
const route = useRoute();
const settingsStore = useSettingsStore();
const categoryStore = useCategoryStore();

// 监听主题设置变化
watch(
  () => settingsStore.theme,
  (newTheme) => {
    // TODO: 在这里实现主题切换逻辑
    console.log('主题已变更为:', newTheme);
  }
);

// 初始化
onMounted(async () => {
  // 加载设置和分类
  await settingsStore.loadSettings();
  await categoryStore.loadCategories();
});
</script>

<template>
  <mainAppStructure>
    <template #titleText>
      Todo 任务清单
    </template>
    <template #navigation>
      <!-- 分类列表 -->
      <CategoryList />
      
      <!-- 设置入口 -->
      <div class="mt-auto px-4 py-2">
        <v-btn
          block
          variant="text"
          prepend-icon="mdi-cog-outline"
          to="/settings"
          class="justify-start"
        >
          设置
        </v-btn>
      </div>
    </template>
    <template #main>
      <!-- 主要内容 -->
      <router-view />
    </template>
  </mainAppStructure>
</template>

<style>
/* 全局样式 */
html, body {
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
}

.v-navigation-drawer {
  display: flex;
  flex-direction: column;
}
</style>